<template>
    <div id="box">
        <div class="login-container">
            <h2 style="font-size: 30px;">会议室预定系统</h2>
            <h2 style="font-size: 20px;">用户登录</h2>
            <el-input class="input-class"  v-model="username" placeholder="请输入用户名" clearable @keyup.enter="login">
                <template #prefix>
                    <!-- 这里使用 img 标签插入图片，需要根据实际情况修改图片路径 -->
                    <img src="../img/user.png" alt="图标" style="width: 20px; height: 20px; margin-right: 5px;">
                 </template>
            </el-input>
            <el-input class="input-class" v-model="password" type="password" placeholder="请输入密码" show-password clearable @keyup.enter="login">
                <template #prefix>
                    <!-- 这里使用 img 标签插入图片，需要根据实际情况修改图片路径 -->
                    <img src="../img/pwd.png" alt="图标" style="width: 20px; height: 20px; margin-right: 5px;">
                 </template>
            </el-input>
            <div class="captcha-container">
                <el-input class="input-class1"  v-model="captchaInput" placeholder="请输入验证码" clearable @keyup.enter="login"/>
                <canvas class="c1" ref="captchaCanvas" width="115" height="30" @click="generateCaptcha" ></canvas>
            </div>
            <el-button class="button-class" type="primary" @click="login" plain >登录</el-button>
            <!-- <el-button class="button-class1" type="primary" @click="register"  plain >注册</el-button> -->
            <div class="container-a">
                <a class="link-class" type="primary" @click="register">注册</a>
                <!-- <el-divider direction="vertical" style="margin-top: 5px;"  /> -->
                <!-- <a class="link-class" type="primary" @click="getpassword">找回密码</a> -->
            </div>
        </div>
    </div>
  </template>
  
  <script>
  // import { th } from 'element-plus/es/locale';
  import axios from "axios";
  export default {
    name:"LoginPage",
    data(){
        return{
            username:"",
            password:"",
            captchaCode: '',
            captchaInput: '',
        }
    },
    methods:{
        login(){
            const params={
                "username": this.username,
                "password":this.password
            
            }
            //发送请求 http://localhost:80/login
            axios.post("customer/login",params).then(res=>{
                console.log(JSON.stringify(res));
                //检查返回发对象中登录是否成功
                //成功跳转姐界面
                //失败提示错误信息
                if(res.data.code===200){
                    console.log(res.data.data.token)
                    localStorage.setItem("token",res.data.data.token);
                    localStorage.setItem('userId',res.data.data.id);
                    if(this.captchaInput==null || this.captchaInput.toLocaleLowerCase() !== this.captchaCode.toLocaleLowerCase()){
                        this.$message.error("验证码错误！");
                        return;
                    }
                    // this.$router.push({
                    //   path:,
                    //   query: {
                    //     username:this.username
                    //   }
                    // });
                    localStorage.setItem('username', this.username);
                    this.$router.push("/")
                    return;
                }
                this.$message.error(res.data.msg||"登录失败");
            }).catch(err=>{
                console.log(JSON.stringify(err))
            })
            //发起请求，检查用户和密码是否正确
            //this.$router.push("/index")
        },
        register(){
            this.$router.push("/customerregister");
        },
        getpassword(){
            this.$router.push("/getpassword");
        },
        generateCaptcha() {
            const canvas = this.$refs.captchaCanvas;
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = this.getRandomColor();
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.font = '30px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            const code = this.generateRandomCode();
            this.captchaCode = code;
            ctx.fillStyle = this.getRandomColor();
            ctx.fillText(code, canvas.width / 2, canvas.height / 2);
            this.drawRandomLines(ctx, canvas.width, canvas.height);
        },
        generateRandomCode() {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let code = '';
            for (let i = 0; i < 4; i++) {
            code += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return code;
        },
        getRandomColor() {
         const r = Math.floor(Math.random() * 256);
         const g = Math.floor(Math.random() * 256);
         const b = Math.floor(Math.random() * 256);
         return `rgb(${r}, ${g}, ${b})`;
        },
        drawRandomLines(ctx, width, height) {
            for (let i = 0; i < 5; i++) {
            ctx.beginPath();
            ctx.moveTo(Math.random() * width, Math.random() * height);
            ctx.lineTo(Math.random() * width, Math.random() * height);
            ctx.strokeStyle = this.getRandomColor();
            ctx.lineWidth = 1;
            ctx.stroke();
            }
        },
    },
    mounted(){
        this.generateCaptcha();
    }
  }
  
  </script>
  <style scoped>
  #box{
    background: url("../img/loginBackground.png");
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;
    /* z-index:-10; */
    /* zoom: 1; */
    background-color: #3c2222;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
  
  }
  .login-container {
    width: 400px;
    height: 400px;
    background-color: #5b6061;
    padding: 40px;
    border-radius: 30px;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .captcha-container {
    width: 100%;
    /* text-align: center; */
    display: flex;
      justify-content: center;
      margin-top: 20px;
  }
  .input-class {
    border-radius: 10px;
    margin-top: 20px;
    width: 300px;
    height: 40px;
    color: #eae5e594;
    border-radius: 10px;
  }
  .input-class1 {
    border-radius: 10px;
    width: 150px;
    height: 40px;
    color: #eae5e594;
  }
  .c1 {
    margin-top: 0px;
    margin-left: 32px;
  }
  .button-class {
    width: 300px;
    height: 45px;
    margin-top: 35px;
    border-radius: 40px;
    font-size: 16px;
  }
  .button-class1 {
   padding:0px;
   width: 300px;
   margin-top: 20px;
   border-radius: 20px;
  }
  .container-a {
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: center; /* 让容器中的元素水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 20px; /* 控制组件之间的间距 */
    width: 100%;
  }
  canvas {
    border: 1px solid #ccc;
    margin-top: 20px;
  }
  .link-class {
    left: 0px;
    margin-top: 5px;
    color: #3c3a3a;
    text-decoration: none;
  }
  .link-class:hover {
    color:#ffffff ;
    text-decoration: underline;
    cursor: pointer;
  }
  </style>